<script setup>
import { ref } from 'vue'

const props = defineProps({
  visible: Boolean,
})

const emits = defineEmits(['update:visible', 'insertFormula'])

const formulaValue = ref('')

const handleClose = () => {
  formulaValue.value = ''
  emits('update:visible', false)
}

const handleSubmit = () => {
  if (formulaValue.value.trim() !== '') {
    emits('insertFormula', formulaValue.value)
  }
  handleClose()
}

const setValue = (value) => {
  formulaValue.value = value
}

const tableData = [
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">a^2</annotation></semantics></math></span>`,
    value: `a^2`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mi>a</mi><mn>2</mn></msub></mrow><annotation encoding="application/x-tex">a_2</annotation></semantics></math></span>`,
    value: `a_2`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mrow><mn>2</mn><mo>+</mo><mn>2</mn></mrow></msup></mrow><annotation encoding="application/x-tex">a^{2+2}</annotation></semantics></math></span>`,
    value: `a^{2+2}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mi>a</mi><mrow><mi>i</mi><mo separator="true">,</mo><mi>j</mi></mrow></msub></mrow><annotation encoding="application/x-tex">a_{i,j}</annotation></semantics></math></span>`,
    value: `a_{i,j}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mi>x</mi><mn>2</mn><mn>3</mn></msubsup></mrow><annotation encoding="application/x-tex">x_2^3</annotation></semantics></math></span>`,
    value: `x_2^3`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mover><mrow><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mo>⋯</mo><mo>+</mo><mn>100</mn></mrow><mo stretchy="true">⏞</mo></mover></mrow><annotation encoding="application/x-tex">\\overbrace{1+2+\\cdots+100}</annotation></semantics></math></span>`,
    value: `\\overbrace{1+2+\\cdots+100}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mo>∑</mo><mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow><mi>N</mi></msubsup><msup><mi>k</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">\\sum_{k=1}^N k^2</annotation></semantics></math></span>`,
    value: `\\sum_{k=1}^N k^2`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mrow><mi>lim</mi><mo>⁡</mo></mrow><mrow><mi>n</mi><mo>→</mo><mi mathvariant="normal">∞</mi></mrow></msub><msub><mi>x</mi><mi>n</mi></msub></mrow><annotation encoding="application/x-tex">\\lim_{n \\to \\infty}x_n</annotation></semantics></math></span>`,
    value: `\\lim_{n \\to \\infty}x_n`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mo>∫</mo><mrow><mo>−</mo><mi>N</mi></mrow><mi>N</mi></msubsup><msup><mi>e</mi><mi>x</mi></msup><mtext> </mtext><mi>d</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">\\int_{-N}^{N} e^x\\, dx</annotation></semantics></math></span>`,
    value: `\\int_{-N}^{N} e^x\\, dx`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msqrt><mn>3</mn></msqrt></mrow><annotation encoding="application/x-tex">\\sqrt{3}</annotation></semantics></math></span>`,
    value: `\\sqrt{3}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mroot><mn>3</mn><mi>n</mi></mroot></mrow><annotation encoding="application/x-tex">\\sqrt[n]{3}</annotation></semantics></math></span>`,
    value: `\\sqrt[n]{3}`,
  },
  {
    key: `<span className="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>sin</mi><mo>⁡</mo><mi>θ</mi></mrow><annotation encoding="application/x-tex">\\sin\\theta</annotation></semantics></math></span>`,
    value: `\\sin\\theta`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>log</mi><mo>⁡</mo><mi>X</mi></mrow><annotation encoding="application/x-tex">\\log X</annotation></semantics></math></span>`,
    value: `\\log X`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mrow><mi>log</mi><mo>⁡</mo></mrow><mn>10</mn></msub></mrow><annotation encoding="application/x-tex">\\log_{10}</annotation></semantics></math></span>`,
    value: ` \\log_{10} `,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mrow><mi>log</mi><mo>⁡</mo></mrow><mi>α</mi></msub><mi>X</mi></mrow><annotation encoding="application/x-tex">\\log_\\alpha X</annotation></semantics></math></span>`,
    value: `\\log_\\alpha X`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mrow><mi>lim</mi><mo>⁡</mo></mrow><mrow><mi>t</mi><mo>→</mo><mi>n</mi></mrow></msub><mi>T</mi></mrow><annotation encoding="application/x-tex">\\lim_{t\\to n}T</annotation></semantics></math></span>`,
    value: `\\lim_{t\\to n}T`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mfrac><mn>1</mn><mn>2</mn></mfrac><mo>=</mo><mn>0.5</mn></mrow><annotation encoding="application/x-tex">\\frac{1}{2}=0.5</annotation></semantics></math></span>`,
    value: `\\frac{1}{2}=0.5`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo fence="true">(</mo><mfrac linethickness="0px"><mi>n</mi><mi>k</mi></mfrac><mo fence="true">)</mo></mrow><annotation encoding="application/x-tex">\\binom{n}{k}</annotation></semantics></math></span>`,
    value: `\\binom{n}{k}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mtable rowspacing="0.16em" columnalign="center center" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>x</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>y</mi></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>z</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>v</mi></mstyle></mtd></mtr></mtable><annotation encoding="application/x-tex">\\begin{matrix}x &amp; y \\\\z &amp; v\\end{matrix}</annotation></semantics></math></span>`,
    value: `\\begin{matrix}x & y \\\\z & v\\end{matrix}`,
  },
  {
    key: `<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo fence="true">{</mo><mtable rowspacing="0.36em" columnalign="left left" columnspacing="1em"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mn>3</mn><mi>x</mi><mo>+</mo><mn>5</mn><mi>y</mi><mo>+</mo><mi>z</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mn>7</mn><mi>x</mi><mo>−</mo><mn>2</mn><mi>y</mi><mo>+</mo><mn>4</mn><mi>z</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mo>−</mo><mn>6</mn><mi>x</mi><mo>+</mo><mn>3</mn><mi>y</mi><mo>+</mo><mn>2</mn><mi>z</mi></mrow></mstyle></mtd></mtr></mtable></mrow><annotation encoding="application/x-tex">\\begin{cases}3x + 5y +  z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}</annotation></semantics></math></span>`,
    value: `\\begin{cases}3x + 5y +  z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}`,
  },
]
</script>

<template>
  <el-drawer
    :model-value="visible"
    show-close
    :append-to-body="true"
    title="公式"
    @close="handleClose"
    :size="650"
  >
    <el-input
      type="textarea"
      :rows="4"
      resize="none"
      maxlength="1000"
      v-model="formulaValue"
    />
    <el-button
      type="primary"
      class="margin-top-10 pw-100"
      style="margin-top: 10px;"
      :disalbed="!formulaValue.trim()"
      @click="handleSubmit"
      >完成</el-button
    >
    <div
      style="
        height: calc(100vh - 250px);
        margin-top: 20px;
        overflow-y: auto;
        overflow-x: hidden;
      "
    >
      <h4 class="margin-top-20 margin-bottom-10">常用公式</h4>
      <el-table :show-header="false" border :data="tableData">
        <el-table-column #default="scope" width="150" align="center">
          <div v-html="scope.row.key"></div>
        </el-table-column>
        <el-table-column #default="scope" show-overflow-tooltip align="center">
          <div class="pointer" @click="setValue(scope.row.value)">
            {{ scope.row.value }}
          </div>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss"></style>
